블로그_05_BlockNote 에디터 도입 및 커스터마이징

웹 에디터 기능 구현의 여정

웹 에디터 구현 성공

• 목차랑 아웃라인 디자인 통일이나.... 몇 가지 개선 사항이 보이지만 오늘은 일단 여기까지
  
  

왜 웹 에디터가 필요했는가?

현재 블로그는 로컬에서 마크다운 파일을 수정하고 Git으로 푸시하여 콘텐츠를 업데이트한다.
문제는 단순한 오탈자 수정이라도 웹에 반영하려면 커밋하고 푸시하는 작업이 필요하다는 점이다.
의미 없는 커밋 개수가 늘어나는 것도 싫고, 번거롭다는 생각이 들어서
웹에서 바로 수정하고 저장할 수 있는 인라인 편집 기능을 추가해보면 어떨까 생각했다.

MDXEditor 도입과 실패

뷰 모드와 편집 모드를 나누고, 관리자 로그인/로그아웃 기능을 추가한 후 인라인에서 MDXEditor를 사용하여 마크다운을 편집할 수 있도록 구현해봤다.
오케이 이런게 되는건가? 근데 또 이러네
처음에는 편집 기능도 좋아 보이고, 툴바도 추가할 수 있어서 좋다 싶어 CSS도 맞추며 이것저것 개선 작업을 진행했다. 그런데 큰 문제가 있었다. 이놈의 MDXEditor가 코드 블럭 안의 코드들을 JSX로 파싱해서, 편집 기능이 망가지는 것이었다.

Milkdown으로 리팩토링, 그리고 또 실패

다른 대체제를 찾을 수밖에 없었다. ProseMirror 기반의 Milkdown를 찾았는데, 확장성이 좋고 슬래시 커맨드도 지원해서 Notion 스타일의 편집 경험을 구현할 수 있을 것 같았다. 게다가 MD 네이티브를 아주 잘 구현해주니 현재 블로그 구조상 좋겠다 싶었다.
그렇게 열심히 리팩토링을 했다. CSS가 다시 엉망이 됐지만 그래도 처음에는 잘 작동하는 것 같았다. 문제는 저장할 때 발생했다. 마크다운으로 변환하는 과정에서 내용이 이상하게 바뀌거나 누락되는 경우가 있었다. 특히 테이블 렌더링이 불안정했고, 목차(아웃라인) 표시도 오류가 잦았다.
가장 짜증났던 건 한글 입력 버그였다. 한글을 입력하다 보면 커서가 갑자기 맨 앞으로 점프하는 현상이 있었다. IME 처리가 제대로 안 되는 것 같았다. 핵심 기능인 저장이 불안정하면 에디터로서 의미가 없다고 판단했다. 물론 수정할 방법이 없었던 건 아니지만 다른 방법을 찾아야 했다.

BlockNote로 리팩토링 결정

마지막으로 BlockNote를 선택했다. 노션을 클론한 스타일의 TipTab 기반 라이브러리로, Json-마크다운 변환 레이어를 구현해야 할 필요가 있었지만 가장 좋은 선택이라고 판단했다. 어차피 무거운 프로젝트도 아니니까, 그정도 리소스는 써도 되겠다고 생각했다.
React 컴포넌트로 쉽게 통합할 수 있고, 문서화도 잘 되어 있었다. 무엇보다 최신의 라이브러리고, 개발이 활발하게 진행되고 있어서 안정성에 대한 기대도 있었다.
이후에는 버그와의 전쟁이었다. 한글 입력 시 커서가 점프하는 문제, 이건 onChange 핸들러에서 디바운스를 적용하고 초기 마운트를 무시하도록 처리해서 해결했다. 이미지 상대 경로가 표시되지 않는 문제, 마크다운 파일에서 images/image1.png 같은 상대 경로를 사용하는데, 브라우저가 해석하지 못하는 문제, 다크모드의 CSS 스타일 문제, 이중 인코딩 문제, Embed 이미지 표시 안 되는 문제, 이미지 삭제 후 저장 미반영 문제 등 아주 골치아픈 일들로 하루를 다 보냈고 겨우 기능 구현이 완료됐다.
물론 또 버그나 개선해야 할 점들이 발견될테지만....

구현/개선된 기능들

• 핵심 구현 내역
  • 패키지: @blocknote/react, @blocknote/mantine, @blocknote/core  
  • 마크다운 변환: markdownToBlocks(), blocksToMarkdown() 사용

커스텀 이미지 선택 패널 구현

• 폴더 내 이미지 디렉토리의 이미지를 그리드로 표시하고 선택할 수 있는 패널을 구현했다.  
• 이미지 파일이 많아지면 찾기가 힘들어져서 파일명 검색 기능도 추가했다.
  • 검색창에 입력하면 실시간으로 이미지 필터링
  • 검색 결과 개수 표시
  • 대소문자 구분 없이 검색

다크 모드 스타일링 통일

• 슬래시 메뉴, 포맷팅 툴바, 드롭다운 메뉴 모두 통일된 다크 모드 색상을 적용했다.  

슬래시 메뉴 커스터마이징

• /image 커스터마이징 메뉴
• 제거된 항목:
  • H4, H5, H6 (불필요)
  • Toggle Heading 1-3 (마크다운 미지원)
  • Emoji, Video, Audio, File

포맷팅 툴바 MD 표준화

• 마크다운 표준 포맷만 유지했다.
  • 유지: Bold, Italic, Underline, Strike, Code, Link
  • 제거: 텍스트/배경 색상, 정렬 버튼

코드 블록 개선

속성	값
폰트	JetBrains Mono (Google Fonts)
크기	13px
라이트 배경	#f1f5f9 (slate-100)
다크 배경	#1e293b (slate-800)
테두리	없음

Bullet Point 스타일 통일

• 마크다운 저장 시 * 불릿을 -로 자동 변환하도록 후처리를 추가했다. 나는 기존 마크다운 파일을 쓸 때 -로 써버려서.... 일관성을 유지해야 하기 위함이다.